import { ColumnProps } from "@/components/Table/type";
import { SchemaProps } from "@/components/Form/type";
import { Icon } from "@/components/Icon";
import { ElButton } from "element-plus";
export const columns: ColumnProps[] = [
  { type: "index", label: "#", width: 50 },
  {
    prop: "menuName",
    label: "菜单名称",
    search: { el: "input" },
    render: ({ row }) => {
      return (
        <span>
          <ElButton text={true}>
            <Icon icon={row.icon} />
          </ElButton>
          <span>{row.menuName}</span>
        </span>
      );
    }
  },
  { prop: "orderNum", label: "显示排序", width: 150 },
  { prop: "component", label: "组件路径" },
  { prop: "path", label: "访问路径" },
  { prop: "componentName", label: "组件名称", search: { el: "input" } },
  { prop: "perm", label: "权限标识" },
  { prop: "action", label: "操作", width: 150, fixed: "right" }
];

export const schemas: SchemaProps[] = [
  {
    field: "menuType",
    label: "菜单类型",
    el: "radio-button-group",
    elProps: {
      options: [
        { label: "目录", value: 0 },
        { label: "菜单", value: 1 },
        { label: "按钮", value: 2 }
      ]
    },
    defaultValue: 0,
    required: true
  },
  {
    field: "menuName",
    label: "菜单名称",
    required: true
  },
  {
    field: "icon",
    label: "菜单图标",
    el: "icon-picker",
    required: true,
    ifShow: formModel => formModel.menuType !== 2
  },
  {
    field: "parentId",
    label: "上级菜单",
    el: "input"
  },
  {
    field: "componentType",
    label: "组件类型",
    required: true,
    el: "radio-button-group",
    elProps: {
      options: [
        { label: "路由视图", value: 0 },
        { label: "路由全屏", value: 1 },
        { label: "外部链接", value: 2 }
      ]
    },
    defaultValue: 0,
    ifShow: formModel => 1 === formModel.menuType
  },
  {
    field: "component",
    label: "组件地址",
    required: true,
    ifShow: formModel => formModel.menuType === 1 && formModel.componentType != 2
  },
  {
    field: "componentName",
    label: "组件名称",
    required: true,
    ifShow: formModel => formModel.menuType !== 2 && formModel.componentType != 2
  },
  {
    field: "path",
    label: "访问地址",
    required: true,
    ifShow: formModel => formModel.menuType !== 2
  },
  {
    field: "param",
    label: "访问参数",
    elProps: {
      type: "textarea",
      placeholder: "a=1&b=2"
    },
    ifShow: formModel => formModel.menuType === 1
  },
  {
    field: "perm",
    label: "权限标识",
    required: true,
    ifShow: formModel => formModel.menuType === 2
  },
  {
    field: "orderNum",
    label: "显示排序",
    el: "number",
    elProps: {
      controlsPosition: "right",
      precision: 0,
      style: {
        width: "100%"
      }
    }
  },
  {
    field: "hide",
    label: "隐藏路由",
    el: "switch",
    elProps: {
      inlinePrompt: true,
      activeText: "是",
      inactiveText: "否",
      activeValue: 1,
      inactiveValue: 0
    },
    ifShow: formModel => formModel.menuType !== 2
  },
  {
    field: "affix",
    label: "固定标签",
    el: "switch",
    elProps: {
      inlinePrompt: true,
      activeText: "是",
      inactiveText: "否",
      activeValue: 1,
      inactiveValue: 0
    },
    ifShow: formModel => formModel.menuType === 1
  },
  {
    field: "keepAlive",
    label: "缓存路由",
    el: "switch",
    elProps: {
      inlinePrompt: true,
      activeText: "是",
      inactiveText: "否",
      activeValue: 1,
      inactiveValue: 0
    },
    ifShow: formModel => formModel.menuType === 1
  }
];
